<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>论文期刊管理系统</title>
    <link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.min.css">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-image: url('beijing.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: #333;
        }
        .overlay {
            background-color: rgba(0, 0, 0, 0.6);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .container {
            flex: 1;
            margin-top: 60px;
            max-width: 900px;
            position: relative;
            z-index: 2;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.85);
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }
        .logo {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 240px;
            height: auto;
            z-index: 3;
        }
        h2 {
            color: #004e92;
            font-weight: bold;
            text-align: center;
            margin-bottom: 30px;
        }
        .search-bar {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            gap: 10px;
        }
        .search-bar input {
            border-radius: 25px;
            padding: 12px 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            border: none;
            width: 60%;
        }
        .search-bar button {
            border-radius: 25px;
            padding: 10px 20px;
            font-weight: bold;
            transition: all 0.3s ease;
            border: none;
        }
        #search-btn {
            background-color: #007bff;
            color: white;
        }
        #add-btn {
            background-color: #28a745;
            color: white;
        }
        #search-btn:hover {
            background-color: #0056b3;
        }
        #add-btn:hover {
            background-color: #218838;
        }
        .table-container {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }
        .table th {
            background-color: #007bff;
            color: white;
        }
        .table tbody tr:hover {
            background-color: #e8f0ff;
            transition: background-color 0.3s ease;
        }
        .hint-text {
            color: #004e92;
            font-weight: bold;
            font-size: 16px;
            text-align: center;
            animation: fadeInOut 6s infinite ease-in-out;
        }
        /* 提示文字淡入淡出动画 */
        @keyframes fadeInOut {
            0%, 100% {
                opacity: 0;
            }
            10%, 90% {
                opacity: 1;
            }
        }
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: rgba(26, 26, 26, 0.8);
            color: white;
            font-size: 14px;
            padding: 10px 0;
            text-align: center;
            z-index: 2;
        }
    </style>
</head>
<body>

<div class="overlay"></div>

<!-- 左上角的 logo 图片 -->
<img src="logo.png" alt="Logo" class="logo">

<div class="container">
    <h2>论文期刊管理系统</h2>

    <!-- 搜索栏 -->
    <div class="search-bar">
        <input type="text" class="form-control" id="search-input" placeholder="搜索期刊...">
        <button class="btn" id="search-btn">搜索</button>
        <button class="btn" id="add-btn">添加期刊</button>
    </div>

    <!-- 提示文字 -->
    <div class="hint-text">欢迎你！！！！！！！</div>

    <!-- 表格显示 -->
    <div class="table-container">
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>标题</th>
                <th>作者</th>
                <th>摘要</th>
                <th>发布日期</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="journal-table">
            <!-- 数据将从后端动态加载 -->
            </tbody>
        </table>
    </div>
</div>
<!-- 编辑模态框 -->
<div class="modal fade" id="journalModal" tabindex="-1" role="dialog" aria-labelledby="journalModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="journalModalLabel">期刊操作</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="journal-form">
                    <input type="hidden" id="journal-id">
                    <div class="form-group">
                        <label for="journal-title">标题</label>
                        <input type="text" class="form-control" id="journal-title" required>
                    </div>
                    <div class="form-group">
                        <label for="journal-author">作者</label>
                        <input type="text" class="form-control" id="journal-author" required>
                    </div>
                    <div class="form-group">
                        <label for="journal-abstract">摘要</label>
                        <textarea class="form-control" id="journal-abstract" rows="3" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="journal-date">发布日期</label>
                        <input type="date" class="form-control" id="journal-date" required>
                    </div>
                    <button type="submit" class="btn btn-primary">保存</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 版权声明 -->
<div class="footer">
    版权所有 © 2024 TUST 论文期刊管理系统
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>

<script>
    const hintText = document.querySelector('.hint-text');
    const hints = [
        "欢迎来到天津科技大学论文期刊管理系统！",
        "请输入期刊标题进行搜索",
        "请试试添加您最近发表的论文",
        "您可以点击添加按钮，快速创建新期刊记录",
        "您可以在这里管理和查找所有期刊",
        "希望您体验满意！！！"
    ];
    let hintIndex = 0;

    function changeHintText() {
        hintText.textContent = hints[hintIndex];
        hintIndex = (hintIndex + 1) % hints.length;
    }

    // 每6秒切换提示文字内容
    setInterval(changeHintText, 6000);






    $(document).ready(function() {
        loadJournals();

        $('#search-btn').on('click', function() {
            const title = $('#search-input').val();
            searchJournal(title);
        });

        // 点击添加按钮时，设置模态框标题为“添加论文”
        $('#add-btn').on('click', function() {
            clearModal();
            $('#journalModalLabel').text('添加期刊'); // 设置模态框标题
            $('#journalModal').modal('show');
        });

        $('#journal-form').on('submit', function(event) {
            event.preventDefault();
            const journalId = $('#journal-id').val();
            const journalData = {
                title: $('#journal-title').val(),
                author: $('#journal-author').val(),
                abstractContent: $('#journal-abstract').val(),
                pubdate: $('#journal-date').val(),
                pdfurl: 'http://example.com/pdf-url'
            };

            if (journalId) {
                updateJournal(journalId, journalData);
            } else {
                addJournal(journalData);
            }
        });

        // 使用事件委托处理编辑按钮
        $('#journal-table').on('click', '.edit-btn', function() {
            const journalId = $(this).data('id');
            $('#journalModalLabel').text('编辑期刊'); // 设置模态框标题为“编辑论文”
            loadJournalDetails(journalId);
        });

        $('#journal-table').on('click', '.delete-btn', function() {
            const journalId = $(this).data('id');
            deleteJournal(journalId);
        });
    });

    // 您现有的 loadJournals、searchJournal、loadJournalDetails、addJournal、updateJournal 和 deleteJournal 函数保持不变

    // 加载所有期刊数据
    function loadJournals() {
        $.ajax({
            url: 'http://localhost:8080/user/search',
            type: 'GET',
            success: function(data) {
                $('#journal-table').empty(); // 清空表格
                data.forEach(function(journal) {
                    $('#journal-table').append(`
                        <tr id="row-${journal.id}">
                            <td>${journal.id}</td>
                            <td>${journal.title}</td>
                            <td>${journal.author}</td>
                            <td>${journal.abstractContent}</td>
                            <td>${journal.pubdate}</td>
                            <td>
                                <button class="btn btn-primary edit-btn" data-id="${journal.id}">编辑</button>
                                <button class="btn btn-danger delete-btn" data-id="${journal.id}">删除</button>
                            </td>
                        </tr>
                    `);
                });

                //
                // // 绑定编辑、删除按钮事件
                // $('.edit-btn').on('click', function() {
                //     const journalId = $(this).data('id');
                //     loadJournalDetails(journalId);
                // });
                //
                // $('.delete-btn').on('click', function() {
                //     const journalId = $(this).data('id');
                //     deleteJournal(journalId);
                // });
            },
            error: function(error) {
                console.error('加载期刊数据失败:', error);
            }
        });
    }

    // 搜索期刊
    function searchJournal(title) {
        $.ajax({
            url: `http://localhost:8080/user/search?title=${title}`,
            type: 'GET',
            success: function(data) {
                $('#journal-table').empty(); // 清空表格
                data.forEach(function(journal) {
                    $('#journal-table').append(`
                        <tr id="row-${journal.id}">
                            <td>${journal.id}</td>
                            <td>${journal.title}</td>
                            <td>${journal.author}</td>
                            <td>${journal.abstractContent}</td>
                            <td>${journal.pubdate}</td>
                            <td>
                                <button class="btn btn-primary edit-btn" data-id="${journal.id}">编辑</button>
                                <button class="btn btn-danger delete-btn" data-id="${journal.id}">删除</button>
                            </td>
                        </tr>
                    `);
                });
            },
            error: function(error) {
                console.error('搜索期刊失败:', error);
            }
        });
    }

    function loadJournalDetails(id) {
        $.ajax({
            url: `http://localhost:8080/user/search?id=${id}`,
            type: 'GET',
            success: function(journal) {
                console.log('Loaded journal details:', journal); // 添加调试信息
                $('#journal-title').val(journal.title);
                $('#journal-author').val(journal.author);
                $('#journal-abstract').val(journal.abstractContent);
                $('#journal-date').val(journal.pubdate);
                $('#journal-id').val(journal.id);

                $('#journalModal').modal('show');
            },
            error: function(error) {
                console.error('加载期刊详情失败:', error);
            }
        });
    }

    // 添加新期刊
    function addJournal(journalData) {
        $.ajax({
            url: 'http://localhost:8080/user/add',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(journalData),
            success: function(response) {
                loadJournals(); // 重新加载表格数据
                $('#journalModal').modal('hide');
            },
            error: function(error) {
                console.error('添加期刊失败:', error);
            }
        });
    }

    // 更新期刊
    function updateJournal(id, journalData) {
        $.ajax({
            url: `http://localhost:8080/user/update/${id}`,
            type: 'PUT',
            contentType: 'application/json',
            data: JSON.stringify(journalData),
            success: function(response) {
                loadJournals(); // 重新加载表格数据
                $('#journalModal').modal('hide');
            },
            error: function(error) {
                console.error('更新期刊失败:', error);
            }
        });
    }

    // 删除期刊
    function deleteJournal(id) {
        const confirmed = confirm('确认要删除这条记录吗？');
        if (confirmed) {
            $.ajax({
                url: `http://localhost:8080/user/delete/${id}`,
                type: 'DELETE',
                success: function() {
                    loadJournals(); // 重新加载表格数据
                },
                error: function(error) {
                    console.error('删除期刊失败:', error);
                }
            });
        }
    }


    // 清空模态框
    function clearModal() {
        $('#journal-form')[0].reset();
        $('#journal-id').val('');
    }
</script>

</body>
</html>
